<template>
  <div>
    <b-container class="my-5">
      <b-row>
        <b-col cols="8" md="8">
          <b-row>
            <b-col cols="3">
              <ul>
                <li>
                  <h5>关于前端</h5>
                </li>
                <li>发展历程</li>
                <li>管理团队</li>
                <li>企业文化</li>
                <li>加入我们</li>
              </ul>
            </b-col>
            <b-col cols="3">
              <ul>
                <li>
                  <h5>新手帮助</h5>
                </li>
                <li>学员账号</li>
                <li>选课流程</li>
                <li>网报流程</li>
                <li>上课地点</li>
              </ul>
            </b-col>
            <b-col cols="3">
              <ul>
                <li>
                  <h5>常见问题</h5>
                </li>
                <li>如何注册</li>
                <li>如何搜课</li>
                <li>如何报名</li>
                <li>如何缴费</li>
              </ul>
            </b-col>
            <b-col cols="3">
              <ul>
                <li>
                  <h5>联系我们</h5>
                </li>
                <li>校区电话</li>
                <li>意见建议</li>
                <li>联系邮箱</li>
              </ul>
            </b-col>
          </b-row>
        </b-col>
        <b-col cols="4" class="foot_right_wrap" md="4">
          <div class="myicon"></div>
          <div class="footer_right">
            <p>客服热线</p>
            <p>4008-220-220 ( 9:00 - 24:00 )</p>
          </div>
        </b-col>
      </b-row>
      <b-row>
        <!-- 页脚的下半部分 -->
        <div class="footer_bottom" cols="12">
          <p>
            Copyright © 2016 iqianduan.com, All Rights Reserved 版权所有</p>
          <p>
            北京前端教育科技有限公司　京ICP备123456号-1 京公网安备110180201608号
        </p>
        </div>
      </b-row>
    </b-container>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {},
  methods: {}
};
</script>
<style scoped>
ul {
  list-style: none;
}
ul li {
  color: #666666;
  font-size: 12px;
  margin-top: 5px;
}
.footer_right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.foot_right_wrap {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.myicon {
  width: 40px;
  height: 40px;
  background: url(../assets/iconlist.png) no-repeat 0 -410px;
}
.footer_bottom{
  width: 100%;
}
.footer_bottom p{
  width: 100%;
  text-align: center;
}
</style>